import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import News from '../news'
import Index from '../index'
import HouseList from '../houselist'
import Profile from '../profile'
import { TabBar } from 'antd-mobile'
import '../../assets/fonts/iconfont.css'
import './index.css'

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: this.props.history.location.pathname
    };
  }

  itemList = [{
    title: '首页',
    icon: 'icon-ind',
    path: '/home'
  },
  {
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/houseList'
  },
  {
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news'
  },
  {
    title: '我的',
    icon: 'icon-my',
    path: '/home/profile'
  }]

  componentDidUpdate(nextProps) {
    const pathname = nextProps.history.location.pathname

    if (pathname !== this.state.selectedTab) {
      this.setState({
        selectedTab: pathname
      })
    }
  }

  renderTabBarItem() {
    return this.itemList.map(item => (
      <TabBar.Item
        title={item.title}
        key={item.icon}
        icon={<i className={`iconfont ${item.icon}`}></i>}
        selectedIcon={<i className={`iconfont ${item.icon}`}></i>}
        selected={this.state.selectedTab === item.path}
        onPress={() => {
          this.setState({
            selectedTab: item.path
          });

          this.props.history.push(item.path)
        }}
        data-seed="logId"
      >
        {item.title}
      </TabBar.Item>
    ))
  }

  render() {
    return (
      <div className="home" style={{ backgroundColor: '#fff' }}>
        <Route exact path="/home" component={Index} />
        <Route path="/home/houseList" component={HouseList} />
        <Route path="/home/news" component={News} />
        <Route path="/home/profile" component={Profile} />

        <TabBar
          unselectedTintColor="#949494"
          tintColor="#21b97a"
          barTintColor="white"
          noRenderContent={true}
          tabBarPosition="bottom"
        >
          {this.renderTabBarItem()}
        </TabBar>
      </div>
    )
  }
}
